<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/js/e.js"></script>
</head>

<body>
  <div>
    <div>
      <div>
        <div class="box">
          <canvas class="code" width="100" height="35"></canvas>
        </div>
        <input type="text" name="code"><button>校验</button>
      </div>
    </div>
  </div>
  <script>
    // 获取当前要显示验证码的canvas标签
    var code = document.querySelector('.code')
    // 生成验证码
    getCode(code, 4)
    // 点击刷新验证码
    code.onclick = function() {
      // 重新生成验证码
      flush(code)
    }
    // 点击校验annuity
    document.querySelector('button').onclick = function(){
    // 获取用户输入的验证码
    var word = document.querySelector('[name="code"]').value;
    // 调用验证函数进行验证
    var bool = verify(word)
    // 验证成功
    if(bool) alert("验证成功")
    // 验证失败
    else alert("验证失败")
    }
  </script>
</body>
</html>